<template>
  <div>
    <div class="goback" @click="handleGoback"></div>
    <div class="search-content">
      <div class="video-list item">
        <ul>
          <VideoItem 
            v-for="item in videoList" 
            :key="item.name"
            :name="item.name"
          />
        </ul>
      </div>
      <div class="video-content item">
        <div class="current-video-play">
          <div class="current-name">
            <span>当前播放：</span>
            <span>第一教学楼 - A101教室</span>
          </div>
          <div class="play-content">
            <video
              src="@/assets/video/1.mp4"
              controls
              loop
              autoplay="autoplay"
              muted="muted"
            ></video>
          </div>

          <div class="video-list-wrapper">
            <div class="video-list-item active">避风塘</div>
            <div class="video-list-item">避风awdawdawdaw塘</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from 'vue';
import VideoItem from './components/VideoItem.vue';

const router = useRouter();

const videoList = ref([
  { name: '第一教学楼 - A101实验室' },
  { name: '第一教学楼 - A102实验室' },
  { name: '第二教学楼 - B201多媒体教室' },
  { name: '图书馆 - 一楼阅览室' },
  { name: '实验楼 - 化学实验室' },
  { name: '体育馆 - 器材室' },
  { name: '行政楼 - 资产管理处' },
  { name: '第三教学楼 - C301机房' },
  { name: '图书馆 - 二楼自习室' },
  { name: '第二教学楼 - B202语音室' },
  { name: '实验楼 - 物理实验室' },
  { name: '第一教学楼 - A103多功能室' },
  { name: '体育馆 - 篮球场' },
  { name: '第三教学楼 - C302机房' },
  { name: '图书馆 - 三楼报刊阅览室' },
  { name: '实验楼 - 生物实验室' },
  { name: '第二教学楼 - B203录播室' },
  { name: '行政楼 - 会议室' },
  { name: '体育馆 - 乒乓球室' },
  { name: '第一教学楼 - A104研讨室' },
  { name: '实验楼 - 电子实验室' },
  { name: '第三教学楼 - C303创新实验室' }
]);

function handleGoback() {
  router.go(-1);
}
</script>

<style scoped>
.goback {
  width: 7.395833vw;
  height: 1.510417vw;
  background: url("../../assets/gobackBtn.png") 50% no-repeat;
  background-size: 100% 100%;
  margin-left: 1vw;
  margin-bottom: 0.3vw;
  cursor: pointer;
}
.search-content {
  width: 100%;
  height: calc(100vw - 55vw);
}

.search-content {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}
.search-content .item {
  color: #fff;
  /* font-size: 20vw; */
  padding: 1vw 0.3vw;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.search-content .video-list {
  flex: 0 0 20%;
  overflow-y: auto; /* 或者使用 'auto' 来在必要时显示滚动条 */
  min-width: 20vw; /* 设置一个最小宽度以适应大屏幕 */
}
.search-content .video-content {
  flex: 0 0 80%;
  min-width: 60vw; /* 设置一个最小宽度以适应大屏幕 */
  box-sizing: border-box;
}
.item-ins {
  display: flex;
  align-items: center;
  font-size: 0.9vw;
  box-sizing: border-box;
  text-align: left;
  border-radius: 0.21vw;
  border: 1px solid hsla(0, 0%, 100%, 0.4);
  color: #fff;
  cursor: pointer;
  margin-bottom: 1vw;
  justify-content: space-between;
  padding: 0.3vw;
}
.item-ins-name {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-ins-icon {
  padding-right: 0.5vw;
}
.item-ins img {
  display: block;
}

::-webkit-scrollbar {
  background: #1a3b66;
  height: 0.416667vw;
  width: 0.416667vw;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #246ae4; /* 滑块颜色 */
  border-radius: 10px; /* 圆角半径 */
}

.video-content video {
  width: 100%;
  object-fit: fill;
  height: 100%;
  display: block;
}

.video-content .current-name {
  margin-bottom: 0.3vw;
}

.video-content .current-name span {
  height: 2vw;
  color: #a5d2ff;
  font-size: 0.729167vw;
}

.video-list-wrapper {
  width: 100%;
  height: 10%;
  display: flex;
  margin: .3vw 0;
  justify-content: flex-start;
}
.video-list-wrapper .video-list-item {
  height: 1.822917vw;
  width: 6.25vw;
  cursor: pointer;
  font-size: 0.729167vw;
  line-height: 1.822917vw;
  padding: 0 0.520833vw;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #cce8ff;
  border-radius: 0.208333vw;
  border: 1px solid #1f4d99;
  text-align: center;
  background-color: #1a3b66;
  margin-left: .3vw;
}

.video-list-wrapper .video-list-item.active{
    background-color: #4986d6;
}

.play-content {
  width: 100%;
  height: calc(100vw - 60vw);
}
</style>
